<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      section{
        float: left;
        width: 200px;
        height: 200px;
      }
      ul{
          width: 200px;
         
      }
      div{
          width: 200px;
          height: 200px;
          border: 1px solid red;
          display: none;
      }
      div:nth-child(1){
          display: block;
      }
    </style>
</head>
<body>
   <ul>
       <button>文本1</button>
       <button>文本2</button>
       <button>文本3</button>
       <button>文本4</button>
   </ul>
   <section>
       <div>文本1</div>
       <div>文本2</div>
       <div>文本3</div>
       <div>文本4</div>
   </section>
    <script>
        var b=document.getElementsByTagName("button")
        var div=document.getElementsByTagName("div")

        for(let i=0;i<b.length;i++){
        
            b[i].onclick=function(){
               for(let j=0;j<b.length;j++){
                b[j].style.backgroundColor="#fff"
                div[j].style.display="none"
               
               }
                this.style.backgroundColor="yellow"
                div[i].style.display="block"
            }
        }
    </script>
</body>
</html>